<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底层支持 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../../../layui/css/layui.css"   media="all">
  <link rel="stylesheet" href="../../../css/Global.css"  media="all">
  
</head>
<body>
<div class="layui-header header header-doc">
  <div class="layui-main">
    <a class="logo" href="../../index.html">
      <img src="../../../res/logo.png" alt="layui">
    </a>
    <ul class="layui-nav">
      <li class="layui-nav-item layui-this">

      </li>
      <li class="layui-nav-item ">

      </li>
      
      <li class="layui-nav-item">

      </li>
    </ul>
  </div>
</div>
<ul class="site-dir">
  <li><a href="#config"><cite>全局配置</cite><em>config</em></a></li>
  <li><a href="#define"><cite>定义模块</cite><em>define</em></a></li>
  <li><a href="#use"><cite>加载所需模块</cite><em>use</em></a></li>
  <li><a href="#link"><cite>动态加载CSS</cite><em>link</em></a></li>
  <li><a href="#data"><cite>本地存储</cite><em>data</em></a></li>
  <li><a href="#device"><cite>获取设备信息</cite><em>device</em></a></li>
  <li><a href="#other"><cite>其它</cite><em>一般外部不常用</em></a></li>
  <li><a href="#third_party"><cite>第三方支撑</cite></a></li>
</ul>
<div class="layui-main site-inline">
  <div class="site-tree">
  <ul class="layui-tree">
  
    <li><h2>基础说明</h2></li>
  
    <li class="site-tree-noicon ">
      <a href="../index.html" ><cite>开始使用</cite></a>
    </li>
    <li class="site-tree-noicon layui-this">
      <a href="infrastructure.html" >
        <cite>底层支撑</cite>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="element.html" >
        <cite>页面元素</cite>
        <em>规范 / 公共类、属性</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="modules.html" >
        <cite>组件规范</cite>
        <em>使用 / 模块扩展</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="faq.html">
        <cite>常见问题</cite>
      </a>
    </li>
    
    <li><h2>页面元素</h2></li>
    
    
    
    <li class="site-tree-noicon ">
      <a href="../element/color.html">
        <cite>颜色</cite>
        <em>内置的色值参考</em>
      </a>
    </li>
    
    <li class="site-tree-noicon ">
      <a href="../element/icon.html">
        <cite>图标</cite>
        <em>字体图标</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/auxiliar.html">
        <cite>辅助</cite>
        <em>引用 / 分块 / 横线…</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/button.html" >
        <cite>按钮</cite>
        <em>button组</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/form.html">
        <cite>表单</cite>
        <em>form元素集合</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/nav.html">
        <cite>导航</cite>
        <em>菜单 / Tab / 面包屑 …</em>
      </a>
    </li>
    <li class="site-tree-noicon ">
      <a href="../element/table.html">
        <cite>表格</cite>
        <em>table - v1.0.5 新增</em>
      </a>
    </li>
   
    
    <li><h2>内置组件</h2></li>
    
    <li >
      <a href="../modules/layer.html">
        <i class="layui-icon" style="top: 3px;">&#xe638;</i><cite>弹出层</cite>
        <em>layer</em>
      </a>
    </li>
    <li >
      <a href="../modules/layim.html">
        <i class="layui-icon" style="position: relative; top: 3px;">&#xe63a;</i>
        <cite>即时通讯</cite>
        <em>layim</em>
      </a>
    </li>
    <li >
      <a href="../modules/laydate.html">
        <i class="layui-icon" style="top: 1px;">&#xe637;</i><cite>日期时间选择</cite>
        <em>laydate</em>
      </a>
    </li>
    <li >
      <a href="../modules/laypage.html">
        <i class="layui-icon">&#xe633;</i><cite>分页</cite>
        <em>laypage</em>
      </a>
    </li>
    <li >
      <a href="../modules/laytpl.html">
        <i class="layui-icon">&#xe628;</i><cite>模板引擎</cite>
        <em>laytpl</em>
      </a>
    </li>
    <li >
      <a href="../modules/layedit.html">
        <i class="layui-icon">&#xe639;</i>
        <cite>富文本编辑器</cite>
        <em>layedit</em>
      </a>
    </li>
    <li >
      <a href="../modules/form.html">
        <i class="layui-icon" style="top: 2px;">&#xe63c;</i>
        <cite>表单</cite>
        <em>form</em>
      </a>
    </li>
    <li >
      <a href="../modules/upload.html">
        <i class="layui-icon">&#xe62f;</i>
        <cite>文件上传</cite>
        <em>upload</em>
      </a>
    </li>
    <li >
      <a href="../modules/element.html">
        <i class="layui-icon" style="top: 1px; font-size: 18px;">&#xe62a;</i>
        <cite>常用元素操作</cite>
        <em>element</em>
      </a>
    </li>
    <li >
      <a href="../modules/tree.html">
        <i class="layui-icon">&#xe62e;</i>
        <cite>树形菜单</cite>
        <em>tree</em>
      </a>
    </li>
    
    <li >
      <a href="../modules/util.html">
        <i class="layui-icon">&#xe631;</i>
        <cite>工具块</cite>
        <em>util</em>
      </a>
    </li>
    <li >
      <a href="../modules/flow.html">
        <i class="layui-icon">&#xe636;</i>
        <cite>流加载</cite>
        <em>flow</em>
      </a>
    </li>
    <li >
      <a href="../modules/code.html">
        <i class="layui-icon" style="top: 1px;">&#xe635;</i>
        <cite>代码修饰器</cite>
        <em>code</em>
      </a>
    </li>
  </ul>
</div>

  <div class="site-content">
    <h1 class="site-h1">底层支持</h1>
    <div class="site-tips site-text">
      <p>本篇主要介绍layui.js所发挥的作用，其中过滤了大部分在外部可能不是太常用的API，侧重罗列了最常用的框架支撑。</p>
    </div>
    
    
<div style="margin: 15px 0; text-align: center; background-color: #F2F2F2;">
  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="9841027833"></ins>
</div>

    
    <div class="site-title">
      <fieldset><legend><a name="config">全局配置</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.config(options)</em></p>
      <p>你可以在使用组件之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下：</p>
      <pre class="layui-code">
layui.config({
  dir: '/res/layui/' //layui.js 所在路径（<span style="color: #FF5722">注意，如果是script单独引入layui.js，无需设定该参数。</span>），一般情况下可以无视
  ,version: false //一般用于更新组件缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610
  ,debug: false //用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面
  ,base: '' //设定扩展的Layui组件的所在目录，一般用于外部组件扩展
});
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="define">定义模块</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.define([mods], callback)</em></p>
      <p>通过该方法可定义一个 <em>Layui模块</em>。参数mods是可选的，用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。</p>
      <pre class="layui-code">
layui.define(function(exports){
  //do something
  
  exports('demo', function(){
    alert('Hello World!');
  });
});
      </pre>
      <p>跟Requirejs最大不同的地方在于接口输出，exports是一个函数，它接受两个参数，第一个参数为模块名，第二个参数为模块接口，当你声明了上述的一个模块后，你就可以在外部使用了，demo就会注册到layui对象下，即可通过 <em>layui.demo()</em> 去执行该模块的接口。</p>
      <p>你也可以在定义一个模块的时候，声明该模块所需的依赖，如：</p>
      <pre class="layui-code">
layui.define(['layer', 'laypage'], function(exports){
  //do something
  
  exports('demo', function(){
    alert('Hello World!');
  });
});
      </pre>
      <p>上述的<em>['layer', 'laypage']</em>即为本模块所依赖的模块，它并非只能是一个数组，你也可以直接传一个字符型的模块名，但是这样只能依赖一个模块。</p>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="use">加载所需模块</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.use([mods], callback)</em></p>
      <p>
        Layui的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样。
        <br>另外请注意，mods里面必须是一个合法的模块名，不能包含目录。如果需要加载目录，建议采用extend建立别名（详见组件规范）
      </p>
      <pre class="layui-code">
layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage
  ,layedit = layui.layedit;
  
  //do something
});
      </pre>
      <p>该方法的函数其实返回了所加载的模块接口，所以你其实也可以不通过layui对象赋值获得接口（这一点跟Sea.js很像哈）：</p>
      <pre class="layui-code">
layui.use(['laypage', 'layedit'], function(laypage, layedit){
  
  //使用分页
  laypage();
  
  //建立编辑器
  layedit.build();
});
      </pre>
      <p>
    </div>
    
    <!--<div class="site-title">
      <fieldset><legend><a name="all">加载完整内置模块</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.all(callback)</em></p>
      <p>除了使用use方法加载特定需要的模块，Layui实际上还提供了构建后的完整版模块，它是一个合并的文件，通过all方法即可加载，目前它只有<em>150kb</em>上下，gzip后只有<em>50kb</em>，所以说这是一个比较小的资源（可见Layui是多么的轻灵）。如果你的页面需要大量用到layui的许多组件，我们推荐你使用该方法，同时他也只会产生一个资源请求，简单粗暴又省事，实为懒人所必备之神器也！</p>
      <pre class="layui-code">
/**
  my.js
  依赖layui的全部模块
**/
 
layui.all(function(){
  var layer = layui.layer
  ,laytpl = layui.laytpl
  ,laypage = layui.laypage
  ,laydate = layui.data
  //……
 
  //尽情地使用Layui全部的内置组件吧，妈妈说根本不用去想页面可能要用到什么组件了呢。。
});
      </pre>
      <blockquote class="layui-elem-quote layui-quote-nm">
        不过，我们并不十分推荐你采用该方式，因为如果你要用到全部内置模块，还不如直接采用：<a href="/doc/#simple">非模块化方式</a>
      </blockquote>
    </div>-->
    
    <div class="site-title">
      <fieldset><legend><a name="link">动态加载CSS</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.link(href)</em></p>
      <p>href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。</p>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="data">本地存储</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.data(table, settings)</em></p>
      <p>参数<em>table</em>为表名，<em>settings</em>是一个对象，用于设置key、value。
      <br>该方法对localStorage进行了良好的封装，在Layui的多个内置组件（比如layim）中发挥了重要的作用，因此你可以使用它存储一些本地数据。</p>
      <pre class="layui-code">
//【增】：向test表插入一个nickname字段，如果该表不存在，则自动建立。
layui.data('test', {
  key: 'nickname'
  ,value: '贤心'
});
//【删】：删除test表的nickname字段
layui.data('test', {
  key: 'nickname'
  ,remove: true
});
layui.data('test', null); //删除test表
 
//【改】：同【增】，会覆盖已经存储的数据
 
//【查】：向test表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”
      </pre>
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="device">获取设备信息</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>方法：<em>layui.device(key)</em>，参数key是可选的</p>
      <p>由于Layui的一些功能进行了兼容性处理和响应式支持，因此该方法同样发挥了至关重要的作用。尤其是在layui mobile模块中的作用可谓举足轻重。该方法返回了丰富的设备信息：</p>
      <pre class="layui-code">
var device = layui.device();
 
//device即可根据不同的设备返回下述不同的信息
<pre class="layui-code" lay-skin="notepad">
{
  os: "windows" //底层操作系统，windows、linux、mac等
  ,ie: false //ie6-11的版本，如果不是ie浏览器，则为false
  ,weixin: false //是否微信环境
  ,android: false //是否安卓系统
  ,ios: false //是否ios系统
}
</pre>
      </pre>
      <p>
        有时你的App可能会对userAgent插入一段特定的标识，譬如：
        <br>Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 <a>myapp/1.8.6</a> Safari/537.36
      </p>
      <p>你要验证当前的WebView是否在你的App环境，即可通过上述的<em>myapp</em>（即为Native给Webview插入的标识，可以随意定义）来判断。</p>
      <pre class="layui-code">
var device = layui.device('myapp');
if(device.myapp){
  alert('在我的App环境');
}      
      </pre>
      
    </div>
    
    <div class="site-title">
      <fieldset><legend><a name="other">其它</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>其实除此之外，layui.js内部还提供了许多底层引擎，他们同样是整个Layui框架体系的有力支撑，所以有必要露个脸，尽管你可能并不会用到：</p>
      <table class="layui-table">
        <thead>
          <tr>
            <th style="width: 280px;">方法/属性</th>
            <th>描述</th>
          </tr> 
        </thead>
        <tbody>
          <tr>
            <td>layui.cache</td>
            <td>静态属性。获得一些配置及临时的缓存信息</td>
          </tr>
          <tr>
            <td>layui.getStyle(node, name)</td>
            <td>获得一个原始DOM节点的style属性值，如：layui.getStyle(document.body, 'font-size')</td>
          </tr>
          <tr>
            <td>layui.img(url, callback, error)</td>
            <td>图片预加载</td>
          </tr>
          <tr>
            <td>layui.extend(options)</td>
            <td>拓展一个模块别名，如：layui.extend({test: '/res/js/test'})</td>
          </tr>
          <tr>
            <td>layui.router()</td>
            <td>获得location.hash路由，目前在Layui中没发挥作用。对做单页应用会派上用场。</td>
          </tr>
          <tr>
            <td>layui.hint()</td>
            <td>向控制台打印一些异常信息，目前只返回了error方法：layui.hint().error('出错啦')</td>
          </tr>
          <tr>
            <td>layui.each(obj, fn)</td>
            <td>对象（Array、Object、DOM对象等）遍历，可用于取代for语句</td>
          </tr>
          <tr>
            <td>layui.stope(e)</td>
            <td>阻止事件冒泡</td>
          </tr>
          <tr>
            <td>layui.onevent(modName, events, callback)</td>
            <td>自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块</td>
          </tr>
          <tr>
            <td>layui.event(modName, events, params)</td>
            <td>执行自定义模块事件，搭配onevent使用</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="site-title">
      <fieldset><legend><a name="third_party">第三方支撑</a></legend></fieldset>
    </div>
    <div class="site-text">
      <p>Layui<strong>部分组件</strong>依赖<em>jQuery</em>（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用layer的时候，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。</p> 
      <p>另外，我们的图标取材于阿里巴巴矢量图标库（<em>iconfont</em>），构建工具采用<em> Gulp </em>。</p>
      <p>除此之外，不依赖于任何第三方工具。最后，向jQuery（<span style="color: #999;">自信地采用，不爽者请去抱React、Vue等大腿</span>）/iconfont/Gulp致敬！</p>
    </div>
    
    <div class="layui-elem-quote">
  <p>Layui - 用心与你沟通</p>
</div>
    
  </div>
</div>
  
<div class="layui-footer footer footer-doc">
  <div class="layui-main">
    <p>2017 &copy; <a href="../../index.html">layui.com</a> MIT license</p>
    <p>
      <a href="../../../fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
      <!--<a href="javascript:layer.msg('暂无此页');">关于我们</a>-->
      <a href="mailto:xianxin@layui.com">合作联系</a>
      <a href="../../../github.com/sentsin/layui/index.html" target="_blank">Git仓库</a>
      <a href="../../../fly.layui.com/jie/2461.html"  target="_blank">微信公众号</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../../../layui/layui.js" charset="utf-8"></script>
<script src="../../Js/doc.js" type="text/javascript"></script>

<script>
</script>
</body>
</html>